<template>
	<view class="bandingBC">
		<view class="addCard">
			<view class="item">
				<view class="left">
					手机号
				</view>
				<view class="right">
					<input type="number" v-model="phone" placeholder="请输入手机号" placeholder-class="place-class" maxlength="11" />
				</view>
			</view>

			<view class="item">
				<view class="left">
					持有人姓名
				</view>
				<view class="right">
					<input type="text" v-model="name" placeholder="请输入银行卡持有人姓名" placeholder-class="place-class" maxlength="5" />
				</view>
			</view>


			<view class="item">
				<view class="left">
					所属银行
				</view>
				<view class="right place-class">
					<picker mode="selector" :value="index" :range="bankList" @change="onPicker">
						<view class="picker">{{bank}}</view>
					</picker>

					<!-- <input type="text" v-model="bank" placeholder="请输入银行卡所属银行" placeholder-class="place-class" maxlength="10"/> -->
				</view>
			</view>

			<view class="item">
				<view class="left">
					银行卡卡号
				</view>
				<view class="right">
					<input type="number" v-model="bankNumber" placeholder="请输入银行卡卡号" placeholder-class="place-class" maxlength="19" />
				</view>
			</view>
			<view class="item active">
				<view class="left">
					身份证号
				</view>
				<view class="right">
					<input type="number" v-model="idNummer" placeholder="请输入身份证号" placeholder-class="place-class" maxlength="18" />
				</view>
			</view>

			<view class="btn" @click="onConfirm">
				<text>确认</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				name: '',
				bank: '请选择',
				index: 0, // 银行的下标
				bankId: '', // 银行ID 最终传后台这个ID
				bankList: [],
				bankIdList: [], // 银行ID列表
				bankNumber: '',
				idNummer: ''
			};
		},

		onLoad() {
			this.getData();
		},
		methods: {
			onPicker(e) {
				this.index = e.detail.value;
				this.bank = this.bankList[this.index];
				this.bankId = this.bankIdList[e.detail.value];
			},
			async onConfirm() { // 提交
				
				let b = {
					phone: this.phone,
					name: this.name,
					bankid: this.bankId,
					bankcard: this.bankNumber,
					idCard: this.idNummer
				}
				let a = await this.$http.setUserBank(b);
				
				uni.showLoading({
					title: '添加中'
				})
				if (a.code == 200) {
					uni.hideLoading();
					uni.showToast({
						title: a.message
					})
					setTimeout(() => {
						uni.navigateBack();
					},1000)
					return
				}
				uni.hideLoading();
				uni.showToast({
					title: a.message,
					icon: 'none'
				})
			},


			async getData() {
				let a = await this.$http.getBank();
				a.data.forEach((item) => {
					this.bankList.push(item.bank_name);
					this.bankIdList.push(item.id)
				})
			},

			onConfirm1() { // 点击确认按钮
				uni.showToast({
					title: '信息已提交',
					icon: 'none'
				});
				setTimeout(() => {
					// uni.navigateTo({
					// 	url: '/pages/set/bandingBankCard/bandingBankCard',
					// });
					uni.hideLoading()
					uni.navigateBack();
				}, 300)

			},
		},
	}
</script>

<style lang="scss" scoped>
	@import 'static/css/smallCommon.scss'
</style>
